<template>
  <div class="my">
    <img
      src="https://ts1.cn.mm.bing.net/th/id/R-C.47552da175d6aff1fc16a7d59a36a9eb?rik=Pcpt2uSvcf%2bETA&riu=http%3a%2f%2fimg.touxiangkong.com%2fzb_users%2fupload%2f2022%2f12%2f202212111670753004444017.jpg&ehk=9DaYB7pw5oxe3iL28JfWb4LG4yF1hG1sogYzFUPlqm4%3d&risl=&pid=ImgRaw&r=0"
      class="img"
    />
    <h2>爱哭小鬼</h2>
  </div>
  <div class="an">
    <button @click="logout" class="out">退出登录</button>
    <button @click="onloginname" class="out">修改密码</button>
  </div>
</template>

<script setup>
import { useUser } from "@/stores/user";
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";

const userStore = useUser();
const router = useRouter();
const isLoggedIn = ref(false);

onMounted(() => {
  isLoggedIn.value = userStore.isLoggedIn;
});

// 在变化时执行一个回调函数
watch(
  () => userStore.isLoggedIn, //返回当前值
  (newValue) => {
    isLoggedIn.value = newValue; //回调函数，当发生变化时调用
  }
);

// 退出逻辑
const logout = async () => {
  userStore.logout();
  try {
    await router.push("/login");
  } catch (error) {
    console.error("路由器未定义。无法导航到登录页面。");
  }
};

const onloginname = () => {
  let newpass = prompt("请修改你的密码：");
};
</script>
<style>
.my {
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  padding-top: 0px;
  position: relative;
}
.img {
  border-radius: 50%;
  padding-bottom: 5px;
  margin-top: 100px;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 30%;
}
.an {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.out {
  margin-left: 0px;
  margin-left: 5px;
}
</style>
